<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input
        v-model="syncRuleName"
        placeholder="请输入同步规则名称"
        style="width: 200px; margin-right: 20px"
      />
      <el-button
        class="filter-item"
        size="mini"
        type="success"
        icon="el-icon-search"
        @click="search"
      >搜索</el-button>
      <el-button
        style="margin-left: 10px"
        class="filter-item"
        size="mini"
        type="warning"
        icon="el-icon-refresh-left"
        @click="reset"
      >重置</el-button>
    </div>
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="clusterList"
      border
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column
        width="50px"
        label="选择"
        align="center"
      >
        <template scope="scope">
          <el-radio
            v-model="radio"
            :label="scope.row.id"
            @change.native="handleSelectionChange(scope.$index, scope.row)"
          >{{ "" }}</el-radio>
        </template>
      </el-table-column>

      <el-table-column
        prop="syncRuleName"
        label="同步规则名称"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sourceName"
        label="所属源名称"
        show-overflow-tooltip
      />
      <el-table-column
        prop="isPart"
        label="是否分区"
        show-overflow-tooltip
      />
      <el-table-column
        label="同步范围"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.syncRange == 0">全量</span>
          <span v-else>{{ scope.row.syncRange }} 天</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="syncMode"
        label="同步方式"
        show-overflow-tooltip
      />
      <el-table-column
        prop="isDefaultRule"
        label="是否默认规则"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editClick(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right">
      <!--分页组件-->
      <el-pagination
        :current-page="current"
        :page-size="size"
        layout="prev, pager, next,sizes,total"
        :total="length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 编辑表单 -->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="closeEdit"
      :visible.sync="openEdit"
      title="查看详情"
      width="1200px"
      append-to-body
    >
      <el-form
        ref="jqForm"
        :inline="true"
        label-width="180px"
        :rules="rules"
        :model="jqForm"
      >
        <el-form-item
          label="同步规则名称"
          prop="syncRuleName"
        >
          <el-input
            v-model="jqForm.syncRuleName"
            style="width: 280px"
            placeholder="请输入"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="是否分区"
          prop="isPart"
        >
          <el-select
            v-model="jqForm.isPart"
            placeholder="请选择"
            style="width: 280px"
            disabled
          >
            <el-option
              v-for="val in isPartList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="有无时间分区"
          prop="isTimePart"
        >
          <el-select
            v-model="jqForm.isTimePart"
            placeholder="请选择"
            style="width: 280px"
            disabled
          >
            <el-option
              v-for="val in isTimePartList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属源名称"
          prop="sourceName"
        >
          <el-input
            v-model="jqForm.sourceName"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="库名白规则"
          prop="baseNameWhite"
        >
          <el-input
            v-model="jqForm.baseNameWhite"
            type="textarea"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="库名黑规则"
          prop="baseNameBlack"
        >
          <el-input
            v-model="jqForm.baseNameBlack"
            type="textarea"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="表名白规则"
          prop="tableNameWhite"
        >
          <el-input
            v-model="jqForm.tableNameWhite"
            type="textarea"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="表名黑规则"
          prop="tableNameBlack"
        >
          <el-input
            v-model="jqForm.tableNameBlack"
            type="textarea"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="分区白规则"
          prop="partNameWhite"
        >
          <el-input
            v-model="jqForm.partNameWhite"
            type="textarea"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="分区黑规则"
          prop="partNameBlack"
        >
          <el-input
            v-model="jqForm.partNameBlack"
            type="textarea"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="分区值白规则"
          prop="partValueWhite"
        >
          <el-input
            v-model="jqForm.partValueWhite"
            type="textarea"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="分区值黑规则"
          prop="partValueBlack"
        >
          <el-input
            v-model="jqForm.partValueBlack"
            type="textarea"
            placeholder="请输入"
            style="width: 280px"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="同步范围"
          prop="syncRange"
        >
          <el-input
            v-model="jqForm.syncRange"
            maxmaxlength="3"
            placeholder="请输入"
            style="width: 280px"
            disabled
            @input="handlesyncRange"
          />
        </el-form-item>
        <el-form-item
          label="同步方式"
          prop="syncMode"
        >
          <el-select
            v-model="jqForm.syncMode"
            placeholder="请选择"
            style="width: 280px"
            disabled
          >
            <el-option
              v-for="val in syncModeList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="执行频率"
          prop="exeFrequency"
        >
          <el-input
            v-model="jqForm.exeFrequency"
            placeholder="请输入"
            style="width: 280px"
            disabled
            @input="handleexeFrequency"
          />
        </el-form-item>
        <el-form-item
          label="是否默认规则"
          prop="isDefaultRule"
        >
          <el-select
            v-model="jqForm.isDefaultRule"
            placeholder="请选择"
            style="width: 280px"
            disabled
          >
            <el-option
              v-for="val in isDefaultRuleList"
              :key="val"
              :label="val"
              :value="val"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import addSyncRulesApi from '@/api/dashboard/tabs/addSyncRules'

export default {
  name: 'Rules',
  data() {
    return {
      current: 1,
      size: 10,
      length: 0,
      jqForm: {},
      clusterList: [],
      syncRuleName: '',
      openEdit: false,
      title: '',
      isPartList: ['分区', '不分区'],
      isTimePartList: ['有时间分区', '无时间分区'],
      syncModeList: ['时间窗口同步', '源标识同步'],
      isDefaultRuleList: ['是', '否'],
      loading: false,
      id: '',
      radio: '',
      radioList: '',
      rules: {
        isPart: [
          { required: true, message: '请选择是否分区', trigger: 'change' }
        ],
        syncRuleName: [
          { required: true, message: '请输入同步规则名称', trigger: 'blur' }
        ],
        sourceName: [
          { required: true, message: '请输入所属源名称', trigger: 'blur' }
        ]
      }
    }
  },
  // watch: {
  //   data(val, old) {
  //     this.radio = "";
  //     if (this.radioList.length > 0) {
  //       for (let i = 0; i < this.radioList.length; i++) {
  //         if (val.id == this.radioList[i].id) {
  //           this.radio = this.radioList[i].syncRuleId;
  //           break;
  //         }
  //       }
  //     }

  //     // console.log(val);
  //     this.getclustersparingconf();
  //   },
  //   submitData(val, old) {
  //     this.radioList = val;
  //   },
  // },
  created() {
    console.log('relus:')
    console.log(this.data)
    this.getclustersparingconf()
  },
  methods: {
    getclustersparingconf(name) {
      this.loading = true
      var data = {
        current: this.current,
        size: this.size,
        syncRuleName: name
      }
      addSyncRulesApi.getclustersparingconf(data)
        .then((data) => {
          console.log(data.records[0])
          this.length = data.total
          this.clusterList = data.records
          this.loading = false
        })
    },
    search() {
      console.log(this.syncRuleName)
      this.getclustersparingconf(this.syncRuleName)
    },
    reset() {
      this.syncRuleName = ''
      this.getclustersparingconf()
    },
    // 分页
    handleSizeChange(val) {
      this.current = 1
      this.size = val
      this.getclustersparingconf()
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val
      this.getclustersparingconf()
    },
    editClick(row) {
      console.log(row)
      this.title = '编辑'
      var temp = {
        id: row.id,
        syncRuleName: row.syncRuleName,
        isPart: row.isPart,
        isTimePart: row.isTimePart,
        sourceName: row.sourceName,
        baseNameWhite: row.baseNameWhite,
        baseNameBlack: row.baseNameBlack,
        tableNameWhite: row.tableNameWhite,
        tableNameBlack: row.tableNameBlack,
        partNameWhite: row.partNameWhite,
        partNameBlack: row.partNameBlack,
        partValueWhite: row.partValueWhite,
        partValueBlack: row.partValueBlack,
        syncMode: row.syncMode,
        syncRange: row.syncRange,
        exeFrequency: row.exeFrequency,
        isDefaultRule: row.isDefaultRule
      }
      this.jqForm = temp
      this.openEdit = true
    },
    closeEdit() {
      this.openEdit = false
      this.$refs['jqForm'].resetFields()
      this.jqForm = {}
    },
    // 在 Input 值改变时触发
    handlesyncRange(e) {
      let value = e.replace(/[^\d]/g, '') // 只能输入数字
      value = value.replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      value = value.replace(/(\d{3})\d*/, '$1') // 最多保留15位整数
      this.jqForm.syncRange = value
    },
    handleexeFrequency(e) {
      let value = e.replace(/[^\d]/g, '') // 只能输入数字
      value = value.replace(/^0+(\d)/, '$1') // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      value = value.replace(/(\d{3})\d*/, '$1') // 最多保留15位整数
      this.jqForm.exeFrequency = value
    },
    handleSelectionChange(index, row) {
      //   console.log(row);
      this.$emit('changeCate', row)
    }
  }
}
</script>
<style scoped>
.head-container .filter-item {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px 0px 0;
}
</style>

